<script setup>
import { useRouter } from 'vue-router';
import { useCounterStore } from "@/stores/menu.js"

const CounterStore = useCounterStore()

const router = useRouter()
const props = defineProps(["listdata",'index'])


 const headclick = (item,active) => {
  router.push(item.meta.path)
  CounterStore.addMenu(item.meta)
  localStorage.setItem('menuActive',active)
 }





</script>

<template>

  <template v-for="(item,index) in props.listdata" :key="index">
    <el-menu-item @click="headclick(item,`${props.index}-${item.meta.id}`)" :index="`${props.index}-${item.meta.id}`"  v-if = "!item.children">
      <el-icon size="20">
        <component :is="item.meta.icon"></component>
      </el-icon>
      <span>{{item.meta.name}}</span>
    </el-menu-item>


    <el-sub-menu :index="`${props.index}-${item.meta.id}`" v-else>
          <template #title>
            <el-icon size="20">
              <component :is="item.meta.icon"></component>
            </el-icon>
            <span>{{item.meta.name}}</span>
          </template>
          <tree-menu :index="`${props.index}-${item.meta.id}`" :listdata="item.children"></tree-menu>
        </el-sub-menu>

  </template>

</template>

<style scoped>

</style>
